<template>
  <div class="info">
      <span class="back" @click="back">返回</span>
      <div class="bg">
        <div class="name">水果名称: {{ detail.name }}</div>
        <div class="img">
          <img :src="detail.icon" />
        </div>
        <p class="name">水果信息：{{ detail.info }}</p>
        <div class="story">
          <h5>详细介绍：</h5>
          <p>{{ detail.desc }}</p>
        </div>
      </div>
    </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
    return {
      detail: {}
    }
  },
  methods: {
    async getListDetail(id) {
      const { data } = await axios({
        method: "GET",
        url: `https://autumnfish.cn/fruitApi/fruit/${id}`
      })
      if (data.status !== 200) return alert("获取数据失败!")
      this.detail = data.data
    },
    back() {
      this.$router.back()
    }
  },
  created() {
    const id = this.$route.query.id
    this.getListDetail(id)
  }
}
</script>

<style scoped lang="less">
.info {
  display: inline-block;
  flex: 1;
  height: 100%;
  color: #000;
  text-align: center;
  position: relative;
  .back {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    &:hover {
      color: red;
    }
  }
  .bg {
    margin-top: 26px;
    background-color: #fff;
    .story {
      background-color: #fff;
      h5 {
        margin-top: 10px;
      }
      p {
        padding: 30px 50px;
        text-align: left;
        line-height: 30px;
        font-weight: 500;
        text-indent: 2em;
      }
    }
  
    .name {
      text-align: center;
      line-height: 30px;
      border-bottom: 1px solid #ccc;
      font-weight: bold;
      margin-top: 15px;
      color: #6a4d52;
      padding: 14px 0;
      background-color: #fcfaed;
    }
  
    .img {
      margin: 15px 0;
      text-align: center;
      max-height: 45%;
      overflow: hidden;
  
      // 伸缩盒子实现图片居中
      display: flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
  
      > img {
        width: 120px;
        height: 120px;
        object-fit: cover;
      }
    }
  }
}

h5 {
  font-size: 18px;
}

</style>